<template>
    <div class="toolbox-form-box1">
        <div class="toolbox-form-item" style="padding: 12px;">
            <a-form-model
                :id="randomId"
                class="form-model-big-box"
                ref="ruleForm"
                :model="form"
                :rules="rules"
                layout="inline"
            >
                <a-descriptions bordered style="width: 100%;">
                    <a-descriptions-item >
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            活动名称
                        </span>
                        <a-form-model-item ref="name" prop="name">
                            <a-input
                                v-model="form.name"
                                placeholder="请输入活动名称"
                                @blur="() => {$refs.name.onFieldBlur();}"
                            />
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item >
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            活动区域
                        </span>
                        <a-form-model-item prop="region">
                            <a-select v-model="form.region" placeholder="请选择活动区域" style="width: 184px;">
                                <a-select-option value="区域1">区域1</a-select-option>
                                <a-select-option value="区域2">区域2</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item >
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            活动时间
                        </span>
                        <a-form-model-item required prop="date2">
                            <a-range-picker v-model="form.date2" style="width: 100%;" />
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item >
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            到场时间
                        </span>
                        <a-form-model-item required prop="date1">
                            <a-date-picker
                                v-model="form.date1"
                                style="min-width: 184px;"
                                show-time
                                type="date"
                                placeholder="请选择时间"
                            />
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item >
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            活动单位
                        </span>
                        <a-form-model-item required prop="date3">
                            <a-select
                                show-search
                                :value="form.date3"
                                placeholder="请输入活动单位"
                                style="width: 184px"
                                :default-active-first-option="false"
                                :show-arrow="false"
                                :filter-option="false"
                                :not-found-content="null"
                                @search="handleSearch"
                                @change="handleChange"
                            >
                                <a-select-option v-for="(item,index) in searchData" :key="item.id">
                                {{ item.text }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item>
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" style="color: #fff;">*</span>
                            即时送达
                        </span>
                        <a-form-model-item prop="delivery">
                            <div style="width: 184px;">
                                <a-switch v-model="form.delivery" placeholder="请输入即时送达"/>
                            </div>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            活动类型
                        </span>
                        <a-form-model-item prop="type" class="form-item-flex-1">
                            <a-checkbox-group v-model="form.type">
                                <a-checkbox value="1" name="type">
                                    在线1
                                </a-checkbox>
                                <a-checkbox value="2" name="type">
                                    在线2
                                </a-checkbox>
                                <a-checkbox value="3" name="type">
                                    线下1
                                </a-checkbox>
                                <a-checkbox value="4" name="type">
                                    线下2
                                </a-checkbox>
                                <a-checkbox value="5" name="type">
                                    推广
                                </a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            <span style="display: flex;justify-content: space-between;flex: 1;">
                                <span>资</span>
                                <span>源</span>
                            </span>
                        </span>
                        <a-form-model-item prop="resource" >
                            <a-radio-group v-model="form.resource">
                                <a-radio value="1">
                                    资源1
                                </a-radio>
                                <a-radio value="2">
                                    资源2
                                </a-radio>
                                <a-radio value="3">
                                    资源3
                                </a-radio>
                                <a-radio value="4">
                                    资源4
                                </a-radio>
                                <a-radio value="5">
                                    资源5
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-descriptions-item>

                    

                    <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            活动形式
                        </span>
                        <a-form-model-item prop="desc" class="zm-form-model">
                            <a-textarea 
                                style="width: 100%;"
                                v-model="form.desc"
                                :autosize="{ minRows: 3, maxRows: 10000 }"
                                placeholder="请输入活动形式"
                            ></a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                            其他说明
                        </span>
                        <a-form-model-item prop="desc" class="zm-form-model">
                            <div style="width: 100%;">
                                <a-textarea 
                                    style="width: 100%;"
                                    v-model="form.desc"
                                    :autosize="{ minRows: 3, maxRows: 10000 }"
                                    placeholder="请输入其他说明"
                                ></a-textarea>
                            </div>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="6" class="descriptions-item-center">
                        <span slot="label" style="display: flex;align-items: center;">
                            <span class="xhText" style="color: #fff;">*</span>
                            <span style="display: flex;justify-content: space-between;flex: 1;">
                                <span>操</span>
                                <span>作</span>
                            </span>
                        </span>
                        <div style="text-align: center;">
                            <a-button class="blue-btn" type="primary" @click="onSubmit('ruleForm')">验证表单</a-button>
                            <a-button style="margin-left: 10px;" @click="resetForm('ruleForm')">清空</a-button>
                        </div>
                        
                    </a-descriptions-item>
                    
                </a-descriptions>
            </a-form-model>
        </div>
    </div>
</template>
<script>
import { CodeSandboxCircleFilled, ConsoleSqlOutlined } from '@ant-design/icons-vue';

export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            other: '',
            form: {
                name: '',
                region: undefined,
                date1: undefined,
                date2: undefined,
                date3: undefined,
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            rules: {
                name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
                region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
                date1: [{ required: true, message: '请选择时间', trigger: 'change' }],
                date2: [{ required: true, message: '请选择时间', trigger: 'change' }],
                type: [{ type: 'array', required: true, message: '请选择活动类型', trigger: 'change', } ],
                resource: [{ required: true, message: '请选择活动资源', trigger: 'change' },],
                desc: [{ required: true, message: '请输入活动形式', trigger: 'blur' }],
            },
            formLeftText:80,
            windowInnerWidth:window.innerWidth,
            randomId:'formModel'+new Date().getTime(),
            randomId1:'formModel1'+new Date().getTime(),
            searchData1:[{
                text:'xx南宁百会药业集团有限',
                id:1,
            },{
                text:'xx葛洪堂方略制药有限公司',
                id:2,
            },{
                text:'xx葛洪堂药业有限公司',
                id:3,
            },{
                text:'xx维威制药有限公司',
                id:4,
            },{
                text:'桂林南药股份有限公司',
                id:5,
            },{
                text:'桂林市龙昌药品连锁有限公',
                id:6,
            },{
                text:'桂林市龙昌药品连锁有限',
                id:7,
            },{
                text:'南宁市茂诚药品零售连锁有限责任公司康平药店',
                id:8,
            },{
                text:'桂林市龙昌药品连锁有限公司平乐乐安堂药房',
                id:9,
            },{
                text:'桂林市龙昌药品连锁有限公司兴安严关店',
                id:10,
            }],
            searchData:[{
                text:'xx南宁百会药业集团有限',
                id:1,
            },{
                text:'xx葛洪堂方略制药有限公司',
                id:2,
            },{
                text:'xx葛洪堂药业有限公司',
                id:3,
            },{
                text:'xx维威制药有限公司',
                id:4,
            },{
                text:'桂林南药股份有限公司',
                id:5,
            },{
                text:'桂林市龙昌药品连锁有限公',
                id:6,
            },{
                text:'桂林市龙昌药品连锁有限',
                id:7,
            },{
                text:'南宁市茂诚药品零售连锁有限责任公司康平药店',
                id:8,
            },{
                text:'桂林市龙昌药品连锁有限公司平乐乐安堂药房',
                id:9,
            },{
                text:'桂林市龙昌药品连锁有限公司兴安严关店',
                id:10,
            }]
        }
    },
    watch:{

    },
    mounted(){
        //console.log('我在表单页')
    },
    methods:{
        handleSearch(val){
            //console.log(val)
            if(!val){
                this.searchData = JSON.parse(JSON.stringify(this.searchData1))
                return false
            }
            let data = JSON.parse(JSON.stringify(this.searchData))
            this.searchData = []
            data.forEach((item,index)=>{
                if(item.text.indexOf(val) !== -1){
                    this.searchData.push(item)
                }
            })
        },
        handleChange(){

        },
        onSubmit(val) {
            this.$refs[val].validate(valid => {
                if (valid) {
                alert('submit!');
                } else {
                //console.log('error submit!!');
                return false;
                }
            });
        },
        resetForm(val) {
            this.$refs[val].resetFields();
        },
    }
}
</script>
<style lang="less">
.toolbox-form-box1{
    display: flex;
    flex-wrap: wrap;
    .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 88px !important;
        text-align: right;
        font-family:simHei !important;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;
        
    }
    .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 68px !important;//确保左侧固定文字不会换行
    }
    .xhText{
        display: inline-block;
        color: #f5222d;
        line-height: 31px;
        padding-right: 2px;
        font-size: 14px;
        font-weight: 600;
        height: 30px;
    }
    .descriptions-item-center{
        
    }
    .ant-form-inline .ant-form-item-with-help{
        margin-bottom: 0px !important;
    }
    .zm-form-model{
        display: flex;
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
    .ant-form-item-control-wrapper{
        font-family:仿宋_GB2312 !important;
    }
    .ant-descriptions-bordered .ant-descriptions-row{
        border-bottom: 1px solid #e4e3e3;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        border-right: 1px solid #e4e3e3;
    }
    .ant-descriptions-bordered .ant-descriptions-view{
        border: 1px solid #e4e3e3;
        border-right: 0;
    }
    .ant-descriptions-row:last-child{
        border-bottom: 0;
    }
}
</style>